<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Import | MI Tagger</title>
    <link rel="shortcut icon" href="/static/img/favicon.png">
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/import.css">
    <!-- Java Script -->
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
</head>
<body>
    <div id="header">
        <h1>
            <span style="color: #2aabe2">M</span><span style="color: #ed1b24">I</span>
            <span style="color: #3ab54b">T</span><span style="color: #f6931b">a</span><!--
         --><span style="color: #0072bb">g</span><span style="color: #0171b9">g</span><!--
         --><span style="color: #ed1e79">e</span><span style="color: #2face2">r</span>
        </h1>
    </div> <!-- #header -->
    <div id="content">
        <div id="button-group">
            <div id="load-data">
                <a href="javascript:openLoadDialog();">
                    <h2>Load Data</h2>
                </a>
            </div>
            <div id="skip">
                <a href="javascript:skip();">
                    <h2>Skip</h2>
                </a>
            </div>
        </div> <!-- #button-group -->
        
        <div id="load-dialog" class="hide">
            <div id="loading-mask" class="hide">
                <img id="loading" src="/static/img/loading.gif" alt="Loading" />
            </div> <!-- #loading-mask -->
            <a id="choose-meta-trigger" href="javascript:void(0)">
                <h2 id="choose-meta-tip">Choose Metadata Files</h2>
                <input id="meta" type="file" accept=".csv" />
            </a>
            <a id="choose-image-trigger" href="javascript:void(0)">
                <h2 id="choose-image-tip" class="inactive">Choose Image Files</h2>
                <input id="image" type="file" accept="image/*" multiple />
            </a>
            <a href="javascript:upload()">
                <h3>Load</h3>
            </a>
        </div> <!-- load-data-dialog -->
    </div>
    <!-- JavaScript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript">
        function openLoadDialog() {
            $('#load-dialog').removeClass('hide');
        }
    </script>
    <script type="text/javascript">
        $('body').click( function (e) {
            var isUploading = $('#loading-mask').is(':visible');

            if ( e.target == this ) {
                if ( !isUploading ) {
                    $('#load-dialog').addClass('hide');
                }
            }
        });
    </script>
    <script type="text/javascript">
        function skip() {
			var isImageListEmpty = "{{ isImageListEmpty }}"  === "True";
			
			if ( isImageListEmpty ) {
				alert('There\'s no data for you!\nPlease upload the meta data and images or get some image assigned.');
				return;	
			}
            window.location.href='/home/dashboard'
        }
    </script>
    <script type="text/javascript">
        $('#choose-meta-trigger').click(function() {
            var metaUploadControl  = document.getElementById('meta');
            
            if ( metaUploadControl.files.length != 0 ) {
                if ( !confirm('You have selected files, are you sure to continue?\n' +
                              'The file you selected before will be replaced.') ) {
                    return;
                }
            }
            return metaUploadControl.click();
        })
    </script>
    <script type="text/javascript">
        $('#meta').change(function() {
            var metaUploadControl = document.getElementById('meta');

            if ( metaUploadControl.files.length != 0 ) {
                $('#choose-meta-tip').html('You have Chosen Meta Files');
            } else {
                $('#choose-meta-tip').html('Choose Meta Files');
            }
        });
    </script>
    <script type="text/javascript">
        $('#choose-image-trigger').click(function() {
            var imageUploadControl = document.getElementById('image');

            if ( imageUploadControl.files.length != 0 ) {
                if ( !confirm('You have selected files, are you sure to continue?\n' +
                              'The file you selected before will be replaced.') ) {
                    return;
                }
            }
            return imageUploadControl.click();
        });
    </script>
    <script type="text/javascript">
        $('#image').change(function() {
            var imageUploadControl = document.getElementById('image');

            if ( imageUploadControl.files.length != 0 ) {
                $('#choose-image-tip').html('You have Chosen Image Files');
            } else {
                $('#choose-image-tip').html('Choose Image Files');
            }
        });
    </script>
    <script type="text/javascript">
        function upload() {
            var metaUploadControl  = document.getElementById('meta'),
                imageUploadControl = document.getElementById('image');

            if ( metaUploadControl.files.length == 0 ) {
                alert("You haven't chosen meta data files.");
                return;
            }
            if ( imageUploadControl.files.length == 0 ) {
                alert("You haven't chosen image files.");
                return;
            }

            $('#loading-mask').removeClass('hide');

            uploadMeta(metaUploadControl);
        }
    </script>
    <script type="text/javascript">
        function uploadMeta(metaUploadControl) {
            var formData        = new FormData();

            for ( var i = 0; i < metaUploadControl.files.length; ++ i ) {
                file = metaUploadControl.files[i];
                formData.append('file_upload', file);
            }
            return uploadFiles(formData);
        }
    </script>
    <script type="text/javascript">
        function uploadImages(imageUploadControl) {
            var maxLengthOfQueue    = 20;
            numberOfQueue           = Math.ceil(imageUploadControl.files.length / maxLengthOfQueue);

            for ( var i = 0; i < numberOfQueue; ++ i ) {
                var formData    = new FormData();
                for ( var j = 0; j < maxLengthOfQueue; ++ j ) {
                    var file = imageUploadControl.files[i * maxLengthOfQueue + j];
                    formData.append('file_upload', file);
                }
                uploadFiles(formData, i);
            }
        }
    </script>
    <script type="text/javascript">
        // Global Variables
        window.numberOfQueue                = 0;
        window.isUploadImageSuccessful      = [];
        window.isUploadMetaSuccessful       = false;
    </script>
    <script type="text/javascript">
        function uploadFiles(formData) {
            $.ajax({
                url: '/home/upload',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(result) {
                    processResult(result);
                }
            });
        }
    </script>
    <script type="text/javascript">
        function processResult(result) {
            console.log(result);
            var imageUploadControl = document.getElementById('image');
            
            if( 'isImageUploaded' in result ) {
                if ( result['isImageUploaded'] ) {
                    isUploadImageSuccessful.push(true);
                } else {
                    isUploadImageSuccessful.push(false);
                }
            }
            if( 'isMetaUploaded' in result ) {
                if ( result['isMetaUploaded'] ) {
                    isUploadMetaSuccessful = true;
                    uploadImages(imageUploadControl);
                } else {
                    alert('Some meta data cannot be uploaded.');
                }
            }

            if ( isUploadImageAllSuccessful() && window.isUploadMetaSuccessful ) {
                window.location.href='/home/dashboard';  
            }
        }
    </script>
    <script type="text/javascript">
        function isUploadImageAllSuccessful() {
            if ( window.isUploadImageSuccessful.length != numberOfQueue ) {
                return false;
            }
            
            var isSuccessful = true;
            for ( var i = 0; i < numberOfQueue; ++ i ) {
                if ( !window.isUploadImageSuccessful[i] ) {
                    isSuccessful = false;
                    alert('Some images cannot be uploaded.');
                }            
            }
            return isSuccessful;
        }
    </script>
</body>
</html>
